import * as React from "react";
import { useHistory, Link } from "react-router-dom";
import { IUser } from "../../types";
import style from "./style.module.css";
import * as api from "../../services/user.services";
import IconFont from  '../../assets/icon'

export default function Mine() {
  const history = useHistory();
  const [user, setUser] = React.useState<IUser>();

  const logout = async () => {
    let result = await api.logout();
    if (result.stat === "OK") {
      history.push("/");
    }
  };

  React.useEffect(() => {
    const userinfo = async () => {
      let result = await api.userInfo();
      console.log(result);
      if (result.stat === "OK") {
        setUser(result.data);
      } else {
        history.push("/");
      }
    };
    userinfo();
  }, [history]);

    return (
      <div className={style.back}>
        <div className={style.head}>
          <Link to='/' className={style.writtle}>BOSS直聘</Link>
        </div>
        <div className={style.info}>
          <div className={style.text}>欢迎，用户{user?.name}</div>
          <img className={style.avater} src={`/api/user/download/${user?._id}`} alt="" />
        </div>
        <div className={style.wrapper}>
        <Link className={style.link} to="/Fav">
          <div className={style.demo}>
            <div className={style.right}>
              <IconFont className={style.icon} type="icon-aixin" />
              <span>我的收藏</span>
            </div>
            <div className={style.left}>
              <IconFont className={style.icon} type="icon-qianjin" />
            </div>
          </div>
        </Link>
        <Link className={style.link} to="/Setting">
          <div className={style.demo}>
            <div className={style.right}>
              <IconFont className={style.icon} type="icon-chilun--" />
              <span>个人设置</span>
            </div>
            <div className={style.left}>
              <IconFont className={style.icon} type="icon-qianjin" />
            </div>
          </div>
        </Link>
        <Link className={style.link} to="/Password">
          <div className={style.demo1}>
            <div className={style.right}>
              <IconFont className={style.icon} type="icon-lock" />
              <span>修改密码</span>
            </div>
            <div className={style.left}>
              <IconFont className={style.icon} type="icon-qianjin" />
            </div>
          </div>
        </Link>
        </div>
        <button className={style.outputButton} onClick={logout}>
            退出账号
          </button>
      </div>
    );
}
